<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/personal.css" />
		<link rel="stylesheet" type="text/css" href="css/com.css" />
		<script src="js/jquery-1.11.3.js"></script>
		<!--<script src="js/personal.js"></script>-->
        <!--jQuery自动定位当地天气预报代码-->
		<script src="js/jquery.min.js"></script>
        <script src="js/jquery.leoweather.min.js"></script>
		<style type="text/css">
			/*安全策略*/
			
			.personal_main_innerR08mi {
				width: 806px;
				height: 803px;
				float: left;
				margin-left: 10px;
				border: 1px solid #CCCCCC;
				/*overflow: hidden;*/
				margin-top: 10px;
			}
			
			.p08_1mi {
				margin: 10px 0 0 10px;
			}
			
			.p08_2mi {
				margin: 20px 0 10px 10px;
			}
			
			.p08_3mi {
				border-top: 1px solid #CCCCCC;
			}
			/*.p08_3mi div{margin-left: 232px; width: 340px; height: 46px; border: 1px solid  #CCCCCC; margin-bottom: 11px;}*/
			
			.p08_3mi div span {
				display: inline-block;
				margin: 5px;
			}
			
			.p08_3mi div img {
				margin-top: 5px;
			}
			
			.p08_3mi div input {
				height: 30px;
				border: none;
			}
			
			.p08_31mi {
				margin-top: 94px;
				margin-left: 232px;
				width: 340px;
				height: 46px;
				border: 1px solid #CCCCCC;
				margin-bottom: 11px;
			}
			
			.p08_32mi {
				margin-left: 232px;
				width: 340px;
				height: 46px;
				border: 1px solid #CCCCCC;
				margin-bottom: 11px;
			}
			
			.p08_33mi {
				margin-left: 232px;
				width: 340px;
				height: 46px;
				border: 1px solid #CCCCCC;
				margin-bottom: 11px;
			}
			
			.p08_34mi {
				margin-left: 232px;
				width: 340px;
				height: 46px;
				border: 1px solid #CCCCCC;
				margin-bottom: 11px;
			}
			/*.p08_35mi{width: 175px;height: 46px;border: 1px solid  #CCCCCC; margin-bottom: 11px;margin-left: 232px;}
			 .p08_35mi input{width: 141px; height: 41px;}*/
			
			.p08_36mi {
				margin-top: 66px;
				margin-left: 232px;
				width: 340px;
				height: 46px;
				border: 1px solid #CCCCCC;
				margin-bottom: 11px;
			}
			
			.p08_35mi {
				width: 341px;
				height: 49px;
				border: 1px solid #CCCCCC;
				margin: 0px 0 61px 232px;
			}
			
			.p08_35mi div {
				float: left;
			}
			
			.p08_35mi input {
				width: 150px;
				height: 48px;
				border: none;
			}
			
			.p08_4_xmi {
				width: 338px;
				height: 46px;
				/*margin-bottom: 20px;*/
				background: #b20007;
				color: #FFFFFF;
				font-size: 22px;
			}
			/*弹出*/
			
			.po_phone_num {
				display: none;
				margin-left: 228px;
				color: deeppink;
			}
			
			.po_password_0 {
				display: none;
				margin-left: 228px;
				color: deeppink;
			}
			
			.po_password {
				display: none;
				margin-left: 228px;
				color: deeppink;
			}
			
			.po_again_p {
				display: none;
				margin-left: 228px;
				color: deeppink;
			}
		</style>

		<!--加载头部模板-->
		<script>
			$(function() {
				$('#header01').load('personal-header-footer.html #header_wrap');
				$('#footer01').load('personal-header-footer.html  #footer_wrap');

			})
		</script>
	</head>

	<body>

		<!--加载头部模板-->
		<div id="header01"></div>
		<!--个人中心加天气预报-->
		<div class="personal">
			<div class="personal-inner">
				<div class="user">
					<div style="float: left; width: 97px; height: 97px; border-radius: 50%; background:url(img/userimg.png) no-repeat; background-size: cover; margin-top: 10px;"></div>
					<div style="float: left; margin-top: 6px; margin-left: 15px;">
						<div style="font-size: 21px; color: #FFFFFF; line-height: 65px;">个人中心</div>
						<div style="font-size: 21px; color: #FFFFFF;">18895731936</div>
					</div>
				</div>

				<div class="demo">
			<script>
				$('.demo').leoweather({
					format: '<i class="icon-{图标}"></i><p>{城市}<span>|</span>{天气}<span>|</span>{气温}℃</p>'
				});
			</script>
		</div>

			</div>
		</div>
		<div class="inner_personal">
			<div class="aa">
				<div id="leftmenu0">
					<li><img src="img/businessman 02.png" /></li>
					<li>
						<a href="dealNote.html">交易记录</a>
					</li>
					<li style="border-bottom: 1px solid #CCCCCC;">
						<a href="noteAdd.html">充值记录</a>
					</li>
					<li><img src="img/businessman 03.png" /></li>
					<li>
						<a href="personMessage.html">账户信息</a>
					</li>
					<li>
						<a href="certificationMessage.html">实名认证</a>
					</li>

					<li style="border-bottom: 1px solid #CCCCCC;">
						<a href="cardManage.html">卡片管理</a>
					</li>
					<li><img src="img/businessman 04.png" /></li>
					<li>
						<a href="cardApplication.html">卡片申请</a>
					</li>
					<li style="border-bottom: 1px solid #CCCCCC;">
						<a>商家入驻申请</a>
					</li>

					<li><img src="img/businessman 05.png" /></li>
					<li>
						<a href="safeTactic.html">安全策略</a>
					</li>
					<li style="border-bottom: 1px solid #CCCCCC;">
						<a href="serviceReminder.html">提醒服务</a>
					</li>

				</div>

				<ul class="li_02">
					<li>常见问题？</li>
					<li>如何入驻聪付？</li>
					<li>忘记支付密码？</li>
					<li>什么是实名认证？</li>
					<li>收不到邮件激活？</li>
					<li>手机充值未到账？</li>
					<li>如何设置安全问题？</li>
				</ul>

			</div>

			<div id="mcont0" class="bb">

				<!--8888888888888888888888888888888888-->

				<div class="personal_main_innerR08mi">
					<div class="p08_1mi"><img src="img/p_aq1.png" /></div>
					<div class="p08_2mi">密码登录</div>
					<div class="p08_3mi">
						<form>
							<div class="p08_31mi"><span><img src="css/img/login_01.png"> </span><input type="text" placeholder="旧密码" class="password_0"></div>
							<div class="po_password_0">输入不正确，至少6个字符</div>
							<div class="p08_32mi"><span><img src="css/img/login_01.png"> </span><input type="password" placeholder="新密码" class="password_1"></div>
							<div class="po_password">输入不正确，至少6个字符</div>
							<div class="p08_33mi"><span><img src="css/img/login_01.png"> </span><input type="password" placeholder="确认密码" class="again_p" name="password" /></div>
							<div class="po_again_p">密码与确认密码不相符，请重新填写</div>
							<div class="p08_34mi"><span><img src="css/img/login_01.png"> </span><input type="text" placeholder="手机号" class="phone_num"></div>
							<div class="po_phone_num">请输入正确的手机号码</div>
							<!--<div class="p08_35mi"><span><img src="css/img/login_03.png"> </span><input type="text" placeholder="验证码"><input type="button" placeholder="验证码"></div>-->
							<div class="p08_35mi">
								<div><img src="img/p_gs2.png" /></div>
								<input type="text" id="checkCode" name="checkCode" size="6" class="yanzheng" placeholder="验证码" style="height: 46px;" />
								<input id="btnSendCode" type="button" value="获取验证码" onclick="sendMessage()" style="height: 49px;" />
							</div>

							<div class="p08_36mi"><input type="submit" value="完成" class="p08_4_xmi" style="height: 46px;" /></div>
						</form>

						<!--<div class="po_password">输入不正确，至少6个字符</div>
<div class="po_again_p">密码与确认密码不相符，请重新填写</div>
 <div class="po_phone_num">请输入正确的手机号码</div>-->

					</div>

				</div>

			</div>
		</div>

		<!--加载尾部的内容-->
		<div id="footer01"></div>
	</body>
	<script>
		//倒计时
		var InterValObj; //timer变量，控制时间  
		var count = 60; //间隔函数，1秒执行  
		var curCount; //当前剩余秒数  
		var code = ""; //验证码  
		var codeLength = 6; //验证码长度  
		function sendMessage() {
			curCount = count;
			var phone = $("#phone").val(); //手机号码  
			if(phone != "") {
				//设置button效果，开始计时  
				$("#btnSendCode").attr("disabled", "true");
				$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
				InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次  
				//向后台发送处理数据  
				$.ajax({
					type: "POST", //用POST方式传输  
					dataType: "text", //数据格式:JSON  
					url: 'RegisterMessage.action', //目标地址  
					data: "phone=" + phone + "&code=" + code,
					error: function(XMLHttpRequest, textStatus, errorThrown) {},
					success: function(msg) {}
				});
			} else {
				alert("手机号码不能为空！");
			}
		}
		//timer处理函数  
		function SetRemainTime() {
			if(curCount == 0) {
				window.clearInterval(InterValObj); //停止计时器  
				$("#btnSendCode").removeAttr("disabled"); //启用按钮  
				$("#btnSendCode").val("重新发送验证码");
				code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效      
			} else {
				curCount--;
				$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
			}
		}

		//验证
		$(function() {
			var juddge01 = juddge02 = juddge03 = juddge04 = juddge05 = false;

			//验证旧密码
			$(".password_0").blur(function() {
				// alert(1)
				var $password_0 = $(".password_0").val();

				var reg01 = /^\w{6,16}$/;

				if(reg01.test($password_0)) {

					console.log("邮箱或者手机号正确");

					juddge01 = true;

					$(".po_password_0").css("display", "none");
				} else {

					$(".po_password_0").css("display", "block");

					juddge01 = false;
				}

			})

			$(".phone_num").blur(function() {
				//alert(1)
				var $phone_num = $(".phone_num").val();
				var reg02 = /^1[3|4|5|7|8]\d{9}$/; //手机号

				if(reg02.test($phone_num)) {

					console.log("邮箱或者手机号正确");

					$(".po_phone_num").css("display", "none");

					juddge01 = true;
				} else {

					$(".po_phone_num").css("display", "block");

					juddge01 = false;
				}

			})

			//验证密码
			$(".password_1").blur(function() {
				//alert(ok)
				var $password_1 = $(".password_1").val();

				var reg03 = /^\w{6,16}$/;

				if(reg03.test($password_1)) {

					console.log("邮箱或者手机号正确");

					juddge02 = true;

					$(".po_password").css("display", "none");
				} else {

					$(".po_password").css("display", "block");

					juddge02 = false;
				}

			})

			//判断前后两次密码是否一致
			//	$(".password_2").blur(function(){
			//		
			//		//console.log(1);//事件通过
			//		
			//		var $password_2  = $(".password_2").val();
			//		
			//		var reg04     = $(".password_2").val();
			//		
			//		if(reg04 !="" && reg04 == $.password_2){
			//			
			//			console.log("密码与确认密码相符");
			//			
			//			juddge03 = true;
			//			
			//			$(".po_again_p").css("display","none");
			//		}else{
			//			
			//			$(".po_again_p").css("display","block");
			//			
			//			juddge03 = false;
			//		}
			//		
			//	})
			//判断前后两次密码是否一致

			$(".again_p").blur(function() {

					//console.log(1);//事件通过

					var $again_p = $(".again_p").val();

					var reg04 = $(".password_1").val();

					if(reg04 != "" && reg04 == $again_p) {

						console.log("密码与确认密码相符");

						juddge04 = true;

						$(".po_again_p").css("display", "none");
					} else {

						$(".po_again_p").css("display", "block");

						juddge04 = false;
					}

				})
				//判断是否符合注册条件，如果符合则注册，否则不能

			//		$(".submit_1").click(function(){
			//
			//		//console.log(1);//点击事件成功
			//		//alert(1)
			//		
			//		//判断
			//		
			//		if(juddge01 && juddge02 &&juddge03 &&$('input[type=checkbox]').is(':checked')){
			//			//$("#position_form").has("id").css("display","none") && $("input[checked=checked]")
			//			//调用ajax注册
			//			
			//			var $phone_num = $(".phone_num").val();
			//			
			//			var $password  = $(".password").val();
			//
			//			$.ajax({
			//				
			//				url:"http://datainfo.duapp.com/shopdata/userinfo.php",
			//				
			//				type:"POST",
			//				
			//				data:{
			//					status:"register",
			//					userID:$phone_num,
			//					
			//					password:$password
			//				},
			//				success:function(res){
			//					console.log(res);
			//					switch(res){
			//						case "0":alert("用户名重名");break;
			//						case "1":alert("注册成功");window.location.href="successful.html";break;//注册成功跳转到登录页
			//						case "2":alert("数据库报错");break;
			//						default:alert(res);
			//					}
			//					
			//				},
			//				error:function(res){
			//					console.log(2);
			//				}
			//				
			//			})//ajax调用结束
			//		}else{
			//			alert("请认真填写");
			//		}
			//
			//	})

		})
	</script>

</html>